﻿<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
    <BitNav Items="customBasicNavItems"
            NameSelectors="@(new() { IconName =  { Name = nameof(Section.Icon) },
                                     ChildItems =  { Name = nameof(Section.Links) },
                                     Description =  { Name = nameof(Section.Comment) } })" />
</DemoExample>

<DemoExample Title="FitWidth" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
    <BitNav Items="customBasicNavItems" FitWidth
            NameSelectors="@(new() { IconName =  { Name = nameof(Section.Icon) },
                                     ChildItems =  { Name = nameof(Section.Links) },
                                     Description =  { Name = nameof(Section.Comment) } })" />
</DemoExample>

<DemoExample Title="Grouped" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
    <BitNav Items="customCarNavItems"
            RenderType="BitNavRenderType.Grouped"
            NameSelectors="@(new() { Text =  { Name = nameof(CarMenu.Name) },
                                     Url =  { Name = nameof(CarMenu.PageUrl) },
                                     Target =  { Name = nameof(CarMenu.UrlTarget) },
                                     Title =  { Name = nameof(CarMenu.Tooltip) },
                                     IsExpanded =  { Name = nameof(CarMenu.IsExpandedParent) },
                                     CollapseAriaLabel =  { Name = nameof(CarMenu.CollapsedAriaLabel) },
                                     ExpandAriaLabel =  { Name = nameof(CarMenu.ExpandedAriaLabel) },
                                     ChildItems =  { Name = nameof(CarMenu.Links) },
                                     Description =  { Name = nameof(CarMenu.Comment) } })" />
</DemoExample>

<DemoExample Title="Manual Mode" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
    <div>Basic</div><br />
    <BitNav Items="customFoodNavItems"
            Mode="BitNavMode.Manual"
            DefaultSelectedItem="customFoodNavItems[0].Childs[2]"
            NameSelectors="@(new() { Text =  { Selector = item => item.Name },
                                     IconName =  { Selector = item => item.Icon },
                                     ChildItems =  { Selector = item => item.Childs },
                                     Description =  { Selector = item => item.Comment } })" />
    <br /><br /><br />
    <div>Two-Way Bind</div><br />
    <div class="example-box">
        <BitNav @bind-SelectedItem="CustomSelectedFood"
                Items="customFoodNavItems"
                Mode="BitNavMode.Manual"
                DefaultSelectedItem="customFoodNavItems[0].Childs[2]"
                NameSelectors="@(new() { Text =  { Selector = item => item.Name },
                                         IconName =  { Selector = item => item.Icon },
                                         ChildItems =  { Selector = item => item.Childs },
                                         Description =  { Selector = item => item.Comment } })"
                OnSelectItem="(FoodMenu item) => CustomSelectedFoodName = FoodMenuDropdownItems.Single(i => i.Text == item.Name).Text" />
        <br />
        <BitDropdown @bind-Value="CustomSelectedFoodName"
                     FitWidth
                     Label="Select Item"
                     Items="FoodMenuDropdownItems"
                     OnSelectItem="(BitDropdownItem<string> item) => CustomSelectedFood = Flatten(customFoodNavItems).Single(i => i.Name == item.Value)" />
    </div>
</DemoExample>

<DemoExample Title="IconOnly" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
    <BitToggle @bind-Value="iconOnly" Label="Hide texts?" Inline />
    <br />
    <BitNav Items="customIconOnlyNavItems" Mode="BitNavMode.Manual" IconOnly="iconOnly"
            NameSelectors="@(new() { IconName =  { Name = nameof(Section.Icon) },
                                     ChildItems =  { Name = nameof(Section.Links) },
                                     Description =  { Name = nameof(Section.Comment) } })" />
</DemoExample>

<DemoExample Title="Custom Templates" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
    <div>Header Template (Grouped)</div><br />
    <BitNav Items="customCarNavItems"
            RenderType="BitNavRenderType.Grouped"
            NameSelectors="@(new() { Text =  { Name = nameof(CarMenu.Name) },
                                     Url =  { Name = nameof(CarMenu.PageUrl) },
                                     Target =  { Name = nameof(CarMenu.UrlTarget) },
                                     Title =  { Name = nameof(CarMenu.Tooltip) },
                                     IsExpanded =  { Name = nameof(CarMenu.IsExpandedParent) },
                                     CollapseAriaLabel =  { Name = nameof(CarMenu.CollapsedAriaLabel) },
                                     ExpandAriaLabel =  { Name = nameof(CarMenu.ExpandedAriaLabel) },
                                     ChildItems =  { Name = nameof(CarMenu.Links) },
                                     Description =  { Name = nameof(CarMenu.Comment) } })">
        <HeaderTemplate Context="item">
            <div class="nav-custom-header">
                <BitIcon IconName="@BitIconName.FavoriteStarFill" />
                <span>@item.Name</span>
            </div>
        </HeaderTemplate>
    </BitNav>
    <br /><br /><br />
    <div>Item Template</div><br />
    <BitNav Items="customFoodNavItems"
            Mode="BitNavMode.Manual"
            NameSelectors="@(new() { Text =  { Selector = item => item.Name },
                                     IconName =  { Selector = item => item.Icon },
                                     ChildItems =  { Selector = item => item.Childs },
                                     Description =  { Selector = item => item.Comment } })">
        <ItemTemplate Context="item">
            <div class="nav-custom-item">
                <BitCheckbox />
                <BitIcon IconName="@item.Icon" />
                <span>@item.Name</span>
            </div>
        </ItemTemplate>
    </BitNav>
</DemoExample>

<DemoExample Title="Events" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
    <div class="example-box">
        <BitNav Items="customFoodNavItems"
                Mode="BitNavMode.Manual"
                OnItemClick="(FoodMenu item) => CustomClickedItem = item"
                OnSelectItem="(FoodMenu item) => CustomSelectedItem = item"
                OnItemToggle="(FoodMenu item) => CustomToggledItem = item"
                NameSelectors="@(new() { Text =  { Selector = item => item.Name },
                                                   IconName =  { Selector = item => item.Icon },
                                                   ChildItems =  { Selector = item => item.Childs },
                                                   Description =  { Selector = item => item.Comment } })" />
        <div>
            <span>Clicked Item: <b>@CustomClickedItem?.Name</b></span><br />
            <span>Selected Item: <b>@CustomSelectedItem?.Name</b></span><br />
            <span>Toggled Item: <b>@(CustomToggledItem is null ? "N/A" : $"{CustomToggledItem.Name} ({(CustomToggledItem.IsExpanded ? "Expanded" : "Collapsed")})")</b></span>
        </div>
    </div>
</DemoExample>

<DemoExample Title="AllExpanded & NoCollapse" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
    <BitNav AllExpanded NoCollapse
            Items="customNoCollapseNavItems"
            NameSelectors="@(new() { IconName =  { Name = nameof(Section.Icon) },
                                     ChildItems =  { Name = nameof(Section.Links) },
                                     Description =  { Name = nameof(Section.Comment) } })" />
</DemoExample>

<DemoExample Title="Custom Styles" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
    <BitNav Items="customCustomStyleNavItems"
            NameSelectors="@(new() { IconName =  { Name = nameof(Section.Icon) },
                                     ChildItems =  { Name = nameof(Section.Links) },
                                     Description =  { Name = nameof(Section.Comment) } })"
            Styles="@(new() { ItemContainer = "border: 1px solid green; margin: 2px;",
                              ToggleButton = "color: cyan;",
                              Item = "color: red;",
                              ItemIcon = "color: gold; margin-right: 15px;" })" />
</DemoExample>

<DemoExample Title="RTL" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
    <div dir="rtl">
        <BitNav Dir="BitDir.Rtl"
                Items="customRtlNavItems"
                NameSelectors="@(new() { IconName =  { Name = nameof(Section.Icon) },
                                         ChildItems =  { Name = nameof(Section.Links) },
                                         Description =  { Name = nameof(Section.Comment) } })" />
    </div>
</DemoExample>